<template>
	<view class="countdown" v-if="show" style="font-size: 100px;">
		{{time}}
	</view>
</template>

<script>
	export default{
		data(){
			return{
				time: 4,
				show: false,
				timer: null,
				audio: null,
				animationData: null
			}
		},
		onReady(){
			this.audio = uni.createInnerAudioContext()
			this.audio.src = 'https://zhiyue.insyte.cn/media/music/countDown.mp3'
			console.log(this.audio)
			this.audio.onPlay(function(){
				console.log('playing')
			})
			this.audio.onError(function(err){
				console.log('出错了')
			})
		},
		methods:{
			countDown(){
				this.time = 4
				setTimeout(()=>{
					this.audio.play()
				},1000)
				this.timer = setInterval(()=>{
					if(this.time > 1){
						this.time--
						this.show = true
					}else{
						clearInterval(this.timer)
						setTimeout(()=>{
							this.$emit('countEnd')
						}, 1000)
						this.show = false
					}
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.countdown{
		animation: fadein 1s ease infinite;
	}
	@keyframes fadein{
		0%{
			opacity: 0;
			transform: scale(1) translateX(-50%);
		}
		50%{
			opacity: 1;
			transform: scale(1.6) translateX(-50%);
		}
		100%{
			opacity: 0.3;
			transform: scale(1) translateX(-50%);
		}
	}
</style>
